<template>
	<view class="">
		<u-tabs :list="tabList" :is-scroll="false" active-color="#fc3533" :current="tabCurrent" @change="tabChange">
		</u-tabs>

		<view class="u-p-20">
			<view class="one" v-if="tabCurrent==0">
				<view class="u-flex u-row-between">
					<view class="">
						<view class="cl_FFF u-font-26">可用余额</view>
						<view class="cl_FFF u-font-40 u-m-t-20">¥{{statistics.user_wallet}}</view>
					</view>
					<view class="">
						<u-radio-group v-model="radioValue" active-color="#ff605e" @change="radioGroupChange">
							<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
								:disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="u-m-t-20 u-flex cl_FFF " style="border-top: 1rpx solid #ffffff;">
					<view class="u-w-335" style="border-right: 1rpx solid #ffffff;">
						<view class="u-m-t-20 u-flex u-row-between">
							<view class="u-font-26">日利率: {{statistics.money_interest}}</view>
						</view>
						<view class="u-m-t-10">
							<view class="u-font-26" style="padding-right: 20rpx;">今日利息</view>
							<view class="u-font-32">
								¥{{statistics.today_interest}}
							</view>
						</view>
					</view>
					<view class="u-w-335 u-p-l-20">
						<view class="u-font-26 ">总利息</view>
						<view class="u-font-32 u-m-t-20">¥{{statistics.all_interest}}</view>
					</view>
				</view>
			</view>
			<view class="one1" v-if="tabCurrent==1">
				<view class="u-m-t-20 u-flex u-row-around cl_FFF">
					<view class="u-p-20 ">
						<view class="u-font-26" style="padding-right: 20rpx;">可用抵扣金</view>

						<view class="u-font-40 u-m-t-20">¥{{statistics.deduct}}</view>
					</view>
					<view class="u-p-20 u-p-l-30">
						<view class="u-font-26">累计抵扣金</view>
						<view class="u-font-40 u-m-t-20">¥{{statistics.all_deduct}}</view>
					</view>
				</view>
				<view class="u-m-t-20 u-flex u-row-around cl_FFF">
					<view class="u-font-20">抵扣金不可提现仅可在下单时抵扣使用</view>
					<!-- v-if="is_shoper==1" -->
					<view  @click="$u.route('/subcontract/dikoujinCZ/dikoujinCZ?is_wechat_switch='+is_wechat_switch+'&is_alipay_switch='+is_alipay_switch)"
						class=" u-w-148 u-h-60 u-b-r-30 u-l-h-60 u-text-center" style="border:1px solid #FFFFFF ;">充值
					</view>
					<view @click="$u.route('/subcontract/mybag/Deduction/Deduction')"
						class=" u-w-148 u-h-60 u-b-r-30 u-l-h-60 u-text-center" style="border:1px solid #FFFFFF ;">转赠
					</view>
				</view>
			</view>
			<view class="u-m-t-30" style="border-left: 10rpx solid red;padding-left: 30rpx;">
				钱包明细
			</view>
			<view class="bg_FFFFFF u-p-30  u-m-t-30  u-b-r-20">
				<view class="u-flex u-row-between">
					<view @click="detailShow=true" class="u-b-r-14 u-w-396 u-font-28 u-flex u-row-between"
						style="border: 1rpx solid #FF5502;padding: 10rpx">
						<view class="">{{params.direct==''?'选择类型':params.direct_name}}</view>
						<u-icon name="arrow-down"></u-icon>
					</view>
					<view @click="timeShow=true" class="u-b-r-14 u-flex u-font-28 u-row-between"
						style="border: 1rpx solid #FF5502; padding: 10rpx">
						<view class="u-flex">
							<u-image src='https://www.sqkjkj.vip/wxImg/mybag/img1.png' width='28rpx' height='28rpx'>
							</u-image>
							<view class="u-m-l-10" style="padding-right: 20rpx;">
								{{params.days==''?'选择天数':`${params.days}天`}}
							</view>
						</view>

						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>

				<view v-for="(item,index) in list" :key="index" class="u-m-t-30 u-p-b-20"
					style="border-bottom: 1rpx solid  #F1F2F6;">
					<view class="u-flex u-row-between">
						<view class="u-font-26">
							{{item.remark}}
							<text class="u-m-l-10" v-if="item.user_info">{{item.user_info.name}}</text>
							<text class="u-m-l-5" v-if="item.user_info">{{item.user_info.mobile}}</text>
						</view>
						<view class="u-weight" style="color:#454545;">{{item.direct==1?'+':'-'}}￥{{item.money}}</view>
					</view>
					<view class="u-font-26 u-m-t-20" v-if="item.reject_reason">驳回理由：{{item.reject_reason}}</view>
					<view class="u-font-20 u-m-t-20" style="color: #A5A6AC;">{{item.create_time}}</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<u-loadmore :status="status" icon-type="circle" margin-top="20" margin-bottom="20" />
			<view class="u-h-120">

			</view>
		</view>

		<view v-if="tabCurrent==0" class="u-fix u-z-300 u-w-750 u-b-0 u-p-20 bg_FFFFFF u-flex u-row-between">
			<view @click="$u.route('/subcontract/mybag/Subgift/Subgift')"
				class="u-w-228 u-h-98 u-text-center u-l-h-98 u-b-r-14"
				style="background: rgba(255,85,2,0.1);color:#FF5502 ;border: 1rpx solid #FF5502;">转赠
			</view>
			<view @click="$u.route('/subcontract/mybag/Withdrawal/Withdrawal')"
				class="u-w-228 u-h-98 u-text-center u-l-h-98 u-b-r-14"
				style="background: rgba(252,53,51,0.1);color:#FC3533;border: 1rpx solid #FC3533;">提现</view>
			<view v-if="new_charge_button==1" @click="$u.route('/subcontract/Recharge/Recharge2')"
				class="u-w-228 u-h-98 u-text-center u-l-h-98 u-b-r-14 cl_FFF"
				style="background:#FC3533;border: 1rpx solid #FF5502;">充值</view>
			<view v-else @click="$u.route('/subcontract/Recharge/Recharge?is_wechat_switch='+is_wechat_switch+'&is_alipay_switch='+is_alipay_switch)"
				class="u-w-228 u-h-98 u-text-center u-l-h-98 u-b-r-14 cl_FFF"
				style="background:#FC3533;border: 1rpx solid #FF5502;">充值</view>
		</view>
		<u-select v-model="detailShow" :list="detailList" @confirm="detailFirm"></u-select>
		<u-select v-model="timeShow" :list="timeList" @confirm="timeFirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '钱包余额'
				}, {
					name: '抵扣金'
				}, {
					name: '收款码'
				}],
				tabCurrent: 0,
				// 利息切换
				radioList: [{
						name: '抵扣金',
					},
					{
						name: '贡献值',
					},
				],
				radioValue: '抵扣金',
				userinfo: '',
				// 明细下拉
				detailShow: false,
				detailList: [{
						value: '1',
						label: '收入明细'
					},
					{
						value: '2',
						label: '支出明细'
					}
				],
				// 时间下拉
				timeShow: false,
				timeList: [{
						value: '3',
						label: '3'
					},
					{
						value: '5',
						label: '5'
					},
					{
						value: '7',
						label: '7'
					},
					{
						value: '10',
						label: '10'
					}
				],
				params: {
					page: 1,
					page_size: 20,
					type: 1,
					direct: '',
					direct_name: '',
					days: '',
					interest_type: ''
				},
				list: [],
				statistics: '',
				status: 'loadmore',
				new_charge_button: 0,
				is_shoper: 1,
				is_wechat_switch: '1',
				is_alipay_switch: '1',
			}
		},
		onShow() {

			this.$api.get_my_massage({}, res => {
				if (res.data.code == 1) {
					// #ifdef MP-WEIXIN
					this.is_wechat_switch = res.data.data.data.mini_wechat_switch
					// #endif
					// #ifdef H5
					this.is_wechat_switch = res.data.data.data.h5_wechat_switch
					// #endif
					// #ifdef APP-PLUS
					this.is_wechat_switch = res.data.data.data.app_wechat_switch
					// #endif

					this.is_alipay_switch = res.data.data.data.alipay_switch

					this.params.interest_type = res.data.data.data.interest_type
					this.radioValue = this.params.interest_type == 'deduct' ? '抵扣金' : '贡献值'
					this.new_charge_button = res.data.data.data.new_charge_button
					this.is_shoper = res.data.data.data.is_shoper
					uni.setStorageSync("userinfo", res.data.data.data)
					this.clear()
					this.my_money_deduct_detail()
				}
			})



		},
		// 下拉到底事件
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.my_money_deduct_detail();
		},
		methods: {

			// hadnleChongzhi() {
			// 	this.$api.get_my_massage({}, res => {
			// 		if (res.data.data.data.new_charge_button == 1) {
			// 			this.$u.route('/subcontract/Recharge/Recharge2')
			// 		} else {
			// 			this.$u.route('/subcontract/Recharge/Recharge')
			// 		}
			// 	})

			// },
			tabChange(index) {
				if (index == 2) {
					this.$u.route('/subcontract/paymentCode/paymentCode')
					return
				}

				this.tabCurrent = index
				this.params.type = index == 0 ? 1 : 2
				this.clear()
				this.my_money_deduct_detail()
			},
			// 选中任一checkbox时，由checkbox-group触发
			radioGroupChange(e) {
				this.params.interest_type = e == '抵扣金' ? 'deduct' : 'con_val'
				this.my_money_deduct_detail()
			},
			detailFirm(e) {
				this.params.direct = e[0].value
				this.params.direct_name = e[0].label
				this.clear()
				this.my_money_deduct_detail()
			},
			timeFirm(e) {
				this.params.days = e[0].value
				this.clear()
				this.my_money_deduct_detail()
			},
			clear() {
				this.list = [];
				this.params.page = 1;
			},
			my_money_deduct_detail() {

				this.$api.my_money_deduct_detail(this.params, res => {
					if (res.data.code == 1) {
						this.statistics = res.data.data.statistics
						this.radioValue = this.statistics.interest_type == 'deduct' ? '抵扣金' : '贡献值'
						this.params.interest_type = this.statistics.interest_type
						if (res.data.data.detail_list.data.length < 20) {
							this.status = 'nomore';
						} else {
							this.params.page = this.params.page + 1;
							this.status = 'loadmore';
						}
						this.list = this.list.concat(res.data.data.detail_list.data);
						uni.stopPullDownRefresh();
					}
				})
			}
		}
	}
</script>

<style scoped>
	.bg {
		color: red;
	}

	.one {
		padding: 20rpx;
		width: 710rpx;
		height: 302rpx;
		background: url('https://www.sqkjkj.vip/wxImg/mybag/img.png') no-repeat;
		background-size: 100% 100%;
	}

	.one1 {
		padding: 20rpx;
		width: 710rpx;
		height: 302rpx;
		background: url('https://www.sqkjkj.vip/wxImg/mybag/imgs.png') no-repeat;
		background-size: 100% 100%;
	}

	::v-deep(.u-radio__label) {
		color: #FFFFFF !important;
	}
</style>